<template>
  <div class="page-hom">
    <!-- 首页 -->
    <div class="heder">
      <ul class="shou">
        <router-link tag="li" to="/">Welcome</router-link>
        <router-link tag="li" to="wenzhang">文章管理</router-link>
        <router-link tag="li" to="xueyuan">学员管理</router-link>
      </ul>
    </div>
    <div class="centent">
      <div class="centent-hom">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.page-hom{
  height: 100%;
  display: flex;
  flex-direction: column;

  .heder{
    height: 64px;
    padding: 0 50px;
    background: #000;

    .shou{
      display: flex;
      color: #fff;
      line-height: 64px;
      li{
        padding: 0 20px;
        &:hover{
        background: #03c5ff;
        cursor: pointer;
        }
      }
      .router-link-exact-active{
        background: #03c5ff;
      }
    }
  }
  .centent{
    flex: 1;
    padding: 50px;
    background: #f0f2f5;
    .centent-hom{
      height: 100%;
      background: #fff;
    }
  }
}
</style>
